<template>
    <div>
        <Row style="margin:5px 0px 10px 5px" >
            <i-col span="2" >
                <Button  size="default"  type="primary" @click="btn_refresh">刷新</Button>
            </i-col>
            <i-col  span="3">
                <Button  size="default"  type="warning" @click="btn_create_namespace" >创建命名空间</Button>
            </i-col>
            <i-col  span="2" offset="1" >
                <Button  size="default"  type="info" @click="btn_namespace_stat" >命名空间统计</Button>
            </i-col>
        </Row>
        <i-table size="default"   border stripe ref="namespace_table" :columns="format" :data="show_list" :height="sharedState.tableHeight" >
            <template slot-scope="{ row, index }" slot="action">

                <Button  size="default"   v-if="test_inject(index)" type="primary"  style="margin: 3px;"  @click="cacel_inject(index)">取消注入</Button>
                <Button  size="default"  v-else type="primary"  style="margin: 3px;"   @click="inject(index)">添加注入</Button>

                <Button  size="default"  type="error"  style="margin: 3px;"  @click="del_namespace(index)">删除</Button>
            </template>
        </i-table >
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
    </div>

</template>

<script>

import { post,k8s_cluster_post } from '@/api/http'
 import { get_namespace_list,delete_namespace,update_namespace,get_namespace_name_list } from  '@/api'
 import { delete_ns,get_placement } from '@/common/util.js'
import store from '@/store'

export default {
    data() {
        return {
            sharedState: store.state,
            format: [
                {
                    title: '节点',key: 'name'
                },
                {
                    title: '状态',key: 'status'
                },
                {
                    title: '标签',key: 'labels',width:500,
                    render: (h, params) => {
                        let labels = params.row.labels
                        if(labels == null){
                            return h('p','无')
                        }else {
                            let length = Object.keys(labels).length
                            let value = JSON.stringify(labels,undefined,4)
                            if(length>0 && length < 3){
                                return h('pre', value)
                            }else{
                                let placement = get_placement(params)
                                return h('Poptip', {props:{'trigger':'hover','word-wrap':true,'placement':placement,content:value}},[
                                        h('a', '显示')
                                ]);
                            }

                        }
                    }
                },
                {
                    title: '创建时间',key: 'create_time'
                },
                {
                    title: '操作',slot: 'action',align: 'center',
                }
            ],
            total_list: [],
            show_list: [],
            // 分页
            total: 0,
            pageSize: 10,
            istio_injection: false,
        }
    },
    methods: {
        btn_refresh(){
            this.refresh()
        },
        btn_create_namespace(){
            this.$router.push({name: 'createNamespace'})
        },
        btn_namespace_stat(){
            this.$router.push({name: 'namespaceStat'})
        },
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        // bug 取消注入，refresh的页码并没有复原
        refresh() {
            k8s_cluster_post(get_namespace_list).then( (response) => {
                this.total_list = response.data
                this.total = response.data.length
                if(this.total < this.pageSize) {
                    this.show_list = this.total_list
                }else {
                    let currentPage = this.$refs.page.currentPage
                    let _start = (currentPage-1) * this.pageSize
                    let _end = currentPage * this.pageSize
                    this.show_list = this.total_list.slice(_start,_end)
                }
            })
        },
        // update state namespace list
        update_namespace_list(){
            let cluster = store.state.clusterName
            let headers = {'cluster_name':cluster}
            post(get_namespace_name_list,{},headers).then(response => {
                let namespace_list = response.data
                store.setNamespaceList(namespace_list)
            })
        },
        del_namespace(index) {
            let name = this.show_list[index].name
            let result = confirm("确定要删除"+name+"吗?")
            if(result == false) return 
            delete_ns(name,delete_namespace)
            this.update_namespace_list()
            this.refresh()
        },
        update_ns(index,action){
            let name = this.show_list[index].name
            let labels = this.show_list[index].labels
            console.log("update_ns name:",name)
            let data = {"name":name,"labels":labels,"action":action}
            k8s_cluster_post(update_namespace,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('修改istio注入成功')
                    this.refresh()
                }else {
                    alert(info)
                }
            })
        },
        inject(index) {
            this.update_ns(index,"add_istio_inject")
        },
        cacel_inject(index){
            this.update_ns(index,"remove_istio_inject")
        },
        test_inject(index){
            let labels = JSON.stringify(this.show_list[index].labels)
            if(labels.indexOf('istio-inject') == -1){
                return false
            }  
            return true
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style scoped>

</style>